<template>
    <div class="main">
      <h4>警情统计</h4>
      <hr />
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- 时间选择器 -->
        <el-form-item label="请选择时间">
          <el-date-picker
          v-model="formInline.date"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right">
          </el-date-picker>
        </el-form-item>

        <!-- 选择车辆 -->
        <el-form-item label="选择车辆" v-if="carSelect">
          <el-input v-model="formInline.car" placeholder="请选择" readonly @click.native="dialogCarVisible=true"></el-input>
        </el-form-item>

        <!-- 选择组织 -->
        <el-form-item label="选择组织" v-if="organizationSelect">
          <el-input v-model="formInline.organization" placeholder="请选择" readonly @click.native="dialogCompanyVisible=true"></el-input>
        </el-form-item>

        <!-- 结构 -->
        <el-form-item label="结构">
          <el-select v-model="structure">
            <el-option label="按车辆查询" value="按车辆查询"></el-option>
            <el-option label="按组织查询" value="按组织查询"></el-option>
          </el-select>
        </el-form-item>

        <!-- 类型 -->
        <el-form-item label="类型">
          <el-select v-model="formInline.type">
            <el-option label="汇总表" value="汇总表"></el-option>
            <el-option label="日报表" value="日报表"></el-option>
            <el-option label="月报表" value="月报表"></el-option>
          </el-select>
        </el-form-item>

        <!-- 报警类型 -->
        <el-form-item label="报警类型">
          <el-cascader
          :options="options"
          :props="props"
          v-model="formInline.cascader"
          collapse-tags
          clearable>
          </el-cascader>
        </el-form-item>

        <!-- 查询 -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>

        <!-- 导出 -->
        <el-form-item>
          <el-button type="primary" @click="exportExcel">导出</el-button>
        </el-form-item>
      </el-form>

      <!-- 数据表格 -->
      <div class="table-data">
        <el-table
          :data="tableData"
          stripe
          border
          height="440"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
            prop="carP"
            label="车牌号"
            width="160">
          </el-table-column>
          <el-table-column
            prop="organization"
            label="所属组织"
            width="180">
          </el-table-column>
          <el-table-column
            prop="parkC"
            label="车牌颜色"
            width="100">
          </el-table-column>
          <el-table-column
            prop="linkM"
            label="联系人"
            width="180">
          </el-table-column>
          <el-table-column
            prop="linkP"
            label="联系电话"
            width="180">
          </el-table-column>
          <el-table-column
            prop="customA"
            label="自定义报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="emergencyA"
            label="紧急按钮报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="regionS"
            label="区域超速报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="dangerousA"
            label="危险驾驶行为报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="CNSSF"
            label="CNSS模块发生故障报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="CNSSM"
            label="CNSS天线未接或被剪断报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="CNSSS"
            label="CNSS天线短路报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="underP"
            label="终端主电源欠压报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="downP"
            label="终端主电源掉电报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="LCDF"
            label="终端LCD或者显示器故障报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="TTSF"
            label="TTS模块故障/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="cameraF"
            label="摄像头故障/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="overtimeD"
            label="当天累计驾驶超时/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="overtimeP"
            label="超时停车报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="accessA"
            label="进出区域/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="routeA"
            label="进出路线报警/已处理"
            width="180">
          </el-table-column><el-table-column
            prop="drivingL"
            label="路段行驶时间不足或过长/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="routeD"
            label="路线偏离报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="VVSF"
            label="车辆VVS故障/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="oilA"
            label="车辆油量异常报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="vehicleT"
            label="车辆被盗报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="illegalI"
            label="车辆非法点火报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="illegalD"
            label="车辆非法位移报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="rolloverA"
            label="碰撞侧翻报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="noD"
            label="夜间禁止行车报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="speeding"
            label="超速报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="illegalDoor"
            label="非法开门报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="fatigueD"
            label="疲劳驾驶报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="platformRS"
            label="区域超速报警（平台）/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="platformRL"
            label="区域低速报警（平台）/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="platformAA"
            label="进出区域（平台）/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="platformLO"
            label="线路偏移（平台）/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="platformS"
            label="时间段超速报警（平台）/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="platformL"
            label="时间段低速报警（平台）/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="platformFD"
            label="疲劳驾驶（平台）/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="platformOP"
            label="超时停车（平台）/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="platformKP"
            label="关键点监控报警（平台）/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="platformLS"
            label="线路超速报警（平台）/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="platformLL"
            label="线路低速报警（平台）/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="platformRLS"
            label="道路等级超速报警（平台）/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="platformAP"
            label="定位异常（平台）/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="equipmentU"
            label="设备开锁/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="equipmentL"
            label="设备上锁/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="oxygenL"
            label="氧气浓度低/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="otherV"
            label="其他视频故障报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="insufficientM"
            label="特殊录像达到存储阀值报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="smokeS"
            label="烟感报警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="abnormalD"
            label="异常驾驶/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="facialF"
            label="面部疲劳/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="platformNO"
            label="夜间超速报警（平台）/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="overspeedW"
            label="超速预警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="ICF"
            label="道路运输证IC卡模块故障/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="fatigueW"
            label="疲劳驾驶预警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="ForwardCW"
            label="前撞预警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="laneOW"
            label="车道偏移预警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="tirePW"
            label="胎压预警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="rolloverW"
            label="侧翻预警/已处理"
            width="180">
          </el-table-column>
          <el-table-column
            prop="illegalDriving"
            label="违规行驶/已处理"
            width="180">
          </el-table-column>
           <el-table-column
            prop="rightTB"
            label="右转盲区异常报警/已处理"
            width="180">
          </el-table-column>
           <el-table-column
            prop="platformACCA"
            label="ACC信号异常报警（平台）/已处理"
            width="180">
          </el-table-column>
           <el-table-column
            prop="platformPA"
            label="位置信息异常报警（平台）/已处理"
            width="180">
          </el-table-column>
           <el-table-column
            prop="platformOA"
            label="车辆长时异常离线提醒（平台）/已处理"
            width="180">
          </el-table-column>
        </el-table>
      </div>

      <!-- 选择车辆 -->
      <el-dialog title="选择车辆" :visible.sync="dialogCarVisible" width="500px">
        <car-list @option-car="optionCar" :isDialog="true"></car-list>
      </el-dialog>

      <!-- 选择公司 -->
      <el-dialog title="选择公司" :visible.sync="dialogCompanyVisible" width="500px">
        <company-list @option-company="optionCompany" :isDialog="true"></company-list>
      </el-dialog>
    </div>
</template>

<script>
import reportApi from '@/api/report'
import {export_json_to_excel} from '@/public/Export2Excel'
import CarList from '@/views/carList'
import CompanyList from '@/views/companyList'

  export default {
    components: {CarList, CompanyList},

    data() {
      return {
        formInline: {
          date: '',
          car: '',
          organization: '',
          type: '汇总表',
          cascader: []
        },
        tableData: [],
        structure: '按车辆查询',
        carSelect: true,
        organizationSelect: false,
        // 选择车辆
        dialogCarVisible: false,
        dialogCompanyVisible: false,
        // 时间选择器
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }],
        },

        props: { multiple: true },
        options: [{
          value: '全选',
          label: '全选',
          children: [{
            value: '超速报警',
            label: '超速报警',
            children: [{
              value: '超时停车报警',
              label: '超时停车报警'
            },{
              value: '超速报警',
              label: '超速报警'
            },{
              value: '超速预警',
              label: '超速预警'
            }]
          },{
            value: '故障报警',
            label: '故障报警',
            children: [{
              value: 'GNSS模块发生故障',
              label: 'GNSS模块发生故障'
            },{
              value: 'GNSS天线未接或被剪断报警',
              label: 'GNSS天线未接或被剪断报警'
            },{
              value: 'GNSS天线短路报警',
              label: 'GNSS天线短路报警'
            },{
              value: '终端LCD或者显示器故障',
              label: '终端LCD或者显示器故障'
            },{
              value: 'TTS模块故障',
              label: 'TTS模块故障'
            },{
              value: '摄像头故障',
              label: '摄像头故障'
            },{
              value: '车辆VSS故障',
              label: '车辆VSS故障'
            },{
              value: '道路运输IC卡模块故障',
              label: '道路运输IC卡模块故障'
            }]
          },{
            value: '操作报警',
            label: '操作报警',
            children: [{
              value: '紧急按钮报警',
              label: '紧急按钮报警'
            },{
              value: '非法开门报警',
              label: '非法开门报警'
            }]
          },{
            value: '油量报警',
            label: '油量报警',
            children: [{
              value: '车辆油量异常报警',
              label: '车辆油量异常报警'
            }]
          },{
            value: '其它报警',
            label: '其它报警',
            children: [{
              value: '危险驾驶行为报警',
              label: '危险驾驶行为报警'
            },{
              value: '终端主电源欠压报警',
              label: '终端主电源欠压报警'
            },{
              value: '终端主电源掉电报警',
              label: '终端主电源掉电报警'
            },{
              value: '当天累计驾驶超时',
              label: '当天累计驾驶超时'
            },{
              value: '车辆被盗报警',
              label: '车辆被盗报警'
            },{
              value: '车辆非法点火报警',
              label: '车辆非法点火报警'
            },{
              value: '车辆非法位移报警',
              label: '车辆非法位移报警'
            },{
              value: '设备开锁',
              label: '设备开锁'
            },{
              value: '设备上锁',
              label: '设备上锁'
            },{
              value: '氧气浓度低',
              label: '氧气浓度低'
            },{
              value: '其他视频设备故障报警',
              label: '其他视频设备故障报警'
            },{
              value: '特殊报警录像达到存储阀值报警',
              label: '特殊报警录像达到存储阀值报警'
            },{
              value: '烟感报警',
              label: '烟感报警'
            },{
              value: '异常驾驶',
              label: '异常驾驶'
            }]
          },{
            value: '围栏报警',
            label: '围栏报警',
            children: [{
              value: '区域超速报警',
              label: '区域超速报警',
            },{
              value: '进出区域',
              label: '进出区域',
            },{
              value: '进出路线报警',
              label: '进出路线报警',
            },{
              value: '路段行驶时间不足或过长',
              label: '路段行驶时间不足或过长',
            },{
              value: '路线偏离报警',
              label: '路线偏离报警',
            }]
          },{
            value: '安全辅助驾驶报警',
            label: '安全辅助驾驶报警',
            children: [{
              value: '面部疲劳',
              label: '面部疲劳'
            },{
              value: '疲劳驾驶预警',
              label: '疲劳驾驶预警'
            },{
              value: '前撞预警',
              label: '前撞预警'
            },{
              value: '车道偏移预警',
              label: '车道偏移预警'
            },{
              value: '胎压预警',
              label: '胎压预警'
            },{
              value: '侧翻预警',
              label: '侧翻预警'
            },{
              value: '违规行驶',
              label: '违规行驶'
            },{
              value: '右转盲区异常报警',
              label: '右转盲区异常报警'
            },{
              value: '疲劳驾驶报警',
              label: '疲劳驾驶报警'
            },]
          },{
            value: '平台报警',
            label: '平台报警',
            children: [{
              value: '夜间禁止行车报警（平台）',
              label: '夜间禁止行车报警（平台）'
            },{
              value: '区域超速报警（平台）',
              label: '区域超速报警（平台）'
            },{
              value: '区域低速报警（平台）',
              label: '区域低速报警（平台）'
            },{
              value: '进出入区域（平台）',
              label: '进出入区域（平台）'
            },{
              value: '路线偏移（平台）',
              label: '路线偏移（平台）'
            },{
              value: '时间段超速报警（平台）',
              label: '时间段超速报警（平台）'
            },{
              value: '时间段低速报警（平台）',
              label: '时间段低速报警（平台）'
            },{
              value: '疲劳驾驶（平台）',
              label: '疲劳驾驶（平台）'
            },{
              value: '超时停车（平台）',
              label: '超时停车（平台）'
            },{
              value: '关键点监控报警（平台）',
              label: '关键点监控报警（平台）'
            },{
              value: '线路超速报警（平台）',
              label: '线路超速报警（平台）'
            },{
              value: '线路低速报警（平台）',
              label: '线路低速报警（平台）'
            },{
              value: '道路等级超速报警（平台）',
              label: '道路等级超速报警（平台）'
            },{
              value: '夜间超速报警（平台）',
              label: '夜间超速报警（平台）'
            },{
              value: '定位异常（平台）',
              label: '定位异常（平台）'
            },{
              value: 'ACC信号异常报警（平台）',
              label: 'ACC信号异常报警（平台）'
            },{
              value: '位置信息异常报警（平台）',
              label: '位置信息异常报警（平台）'
            },{
              value: '车辆长时异常离线提醒（平台）',
              label: '车辆长时异常离线提醒（平台）'
            },]
          },{
            value: 'G-sensor报警',
            label: 'G-sensor报警',
            children: [{
              value: '碰撞侧翻报警',
              label: '碰撞侧翻报警'
            }]
          },{
            value: '自定义报警',
            label: '自定义报警',
            children: [{
              value: '自定义报警',
              label: '自定义报警'
            }]
          }]
        }]
      }
    },

    watch: {
      structure:function(newVlaue, oldValue){
        if(newVlaue == '按车辆查询'){
          this.carSelect = true
          this.organizationSelect = false
        }else{
          this.carSelect = false
          this.organizationSelect = true
        }
      }
    },

    methods: {
      onSubmit() {
        // 获取报警选择框数据
        const alertArr = []
        const arr = this.formInline.cascader
        for(var i=0; i<arr.length; i++){
          alertArr.push(arr[i][arr[i].length-1])
        }
        console.log(alertArr)

        reportApi.getSixOfOne(this.formInline).then(response => {
          const resp = response.data
          if(resp.flag){
            this.tableData = resp.data.rows
          }else{
            this.$message({
              message: resp.message,
              type: 'warning'
            })
          }
        })
      },

      // 导出EXCEL表格
      exportExcel(){
            require.ensure([], () => {
            const tHeader = ['车牌号', '所属组织', '车牌颜色', '联系人', '联系电话', '自定义报警', '紧急按钮报警', '区域超速报警', '危险驾驶行为报警', 'CNSS模块发生故障报警', 'CNSS天线未接或被剪断报警', 'CNSS天线短路报警', '终端主电源欠压报警', '终端主电源掉电报警', '终端LCD或者显示器故障报警', 'TTS模块故障', '摄像头故障', '当天累计驾驶超时', '超时停车报警', '进出区域', '进出路线报警', '路段行驶时间不足或过长', '路线偏离报警', '车辆VSS故障', '车辆油量异常报警', '车辆被盗报警', '车辆非法点火报警', '车辆非法位移报警', '碰撞侧翻报警', '夜间禁止行车报警', '超速报警', '非法开门报警', '疲劳驾驶报警', '区域超速报警（平台）', '区域低速报警（平台）', '进出区域（平台）', '线路偏移（平台）', '时间段超速报警（平台）', '时间段低速报警（平台）', '疲劳驾驶（平台）', '超时停车（平台）', '关键点监控报警（平台）', '线路超速报警（平台）', '线路低速报警（平台）', '道路等级超速报警（平台）', '定位异常（平台）', '设备开锁', '设备上锁', '氧气浓度低', '其他视频设备故障报警', '特殊录像达到存储阀值报警', '烟感报警', '异常驾驶', '面部疲劳', '夜间超速报警（平台）', '超速预警', '道路运输证IC卡模块故障', '疲劳驾驶预警', '前撞预警', '车道偏移预警', '胎压预警', '侧翻预警', '违规行驶', '右转盲区异常报警', 'ACC信号异常报警（平台）', '位置信息异常报警（平台）', '车辆长时异常离线提醒（平台）']
            const filterVal = ['carP', 'organization', 'parkC', 'linkM', 'linkP', 'customA', 'emergencyA', 'regionS', 'dangerousA', 'CNSSF', 'CNSSS', 'underP', 'downP', 'LCDF', 'TTSF', 'cameraF', 'overtimeD', 'overtimeP', 'accessA', 'routeA', 'drivingL', 'routeD', 'VVSF', 'oilA', 'vehicleT', 'illegalI', 'illegalD', 'rolloverA', 'noD', 'speeding', 'illegalDoor', 'fatigueD', 'platformRS', 'platformRL', 'platformAA', 'platformLO', 'platformS', 'platformL', 'platformFD', 'platformOP', 'platformKP', 'platformLS', 'platformLL', 'platformRLS', 'platformAP', 'equipmentU', 'equipmentL', 'oxygenL', 'otherV', 'insufficientM', 'smokeS', 'abnormalD', 'facialF', 'platformNO', 'overspeedW', 'ICF', 'fatigueW', 'ForwardCW', 'laneOW', 'tirePW', 'rolloverW', 'illegalDriving', 'rightTB', 'platformACCA', 'platformPA', 'platformOA']
            const list = this.tableData
            const data = this.formatJson(filterVal, list)
            export_json_to_excel(tHeader, data, '警情统计')
            })
        },
        formatJson(filterVal, jsonData){
            return jsonData.map(v => filterVal.map(j => v[j]))
        },

      optionCar(currentRow){
        console.log('parent', currentRow)
        console.log(currentRow.carP)
        this.formInline.car = currentRow.carP
        this.dialogCarVisible = false
      },

      optionCompany(currentRow){
        console.log('paren', currentRow)
        console.log(currentRow.company)
        this.formInline.organization = currentRow.company
        this.dialogCompanyVisible = false
      }
    }
  };
</script>

<style scoped>
.main{
    position: absolute;
    left: 250px;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: auto;
}
hr{
  padding: 0;
  margin: 0;
}
.el-form{
  padding: 20px 10px 10px 10px;
  background-color: #eee;
}
.table-data{
  width: 100%;
  height: 440px;
  overflow-x: auto;
  overflow-y: auto;
}
</style>